<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 导入jQuery库 -->
		<script src="jquery-3.7.1.js"></script>
		
		<style>
			
			.two
			{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		
		<div id="div01" class="one">1</div>
		<div id="div02">2</div>
		<div class="one">3</div>
		<div>4</div>

		
		<script>
			
			// jQuery核心对象 $
			console.log($);
			
			// 1. 测试使用jQuery设置对象内容
			$("#div01").text("你好,jQuery!")
			$("#div02").html("<a href='https://wwww.baidu.com'>百度</a>")
			
			// 2. 通过选择器找到对象
			// id选择器
			// $("#div01").text("你好,jQuery!")
			// 标签选择器			
			$("div").css("background-color","lightblue");
			// 类别选择器
			$(".one").css("background-color","red");
			
			
			
			
		</script>
		用户名:<input type="text" id="username" /><br />
		<script>
			// 3. 获取和设置对象的值
			// 不传参数，获取值，传参数就是设置值
			// 3.1 text() 文本内容设置
			console.log($("#div01").text())
			// 3.2 html() html内容设置
			// 3.3 val() 表单元素 比如输入框的值
			$("#username").val("abc")
			console.log($("#username").val())
		</script>
		
		<div id="div05" abc="aaa">aaaaa</div>
		<script>
			// 4. 获取访问对象的属性   
			// attr()  普通书信
			// prop()  有5个只读属性  如:offsetX
			// 提供1个参数 得到这个属性值
			console.log($("#div05").attr("abc"))
			// 提供2个参数 设置这个属性的值
			$("#div05").attr("name","bbbb");
			// 移除属性
			$("#div05").removeAttr("name")
		</script>		
		<div id="div06"></div>
		<script>		// 5. 设置样式 .css()			
			$("#div06").css("width","50px");
			$("#div06").css("height","50px");
			$("#div06").css("background-color","green");
		</script>
		<div id="div07" style="width: 50px;height: 50px;" ></div>
		<button id="btn07a">添加class</button>
		<button id="btn07b">删除class</button>
		<button id="btn07c">切换</button>
		<script>

			$("#btn07a").click(function(){
				$("#div07").addClass("two");				
			});
			$("#btn07b").click(function(){
				$("#div07").removeClass("two");
			});
			$("#btn07c").click(function(){
				$("#div07").toggleClass("two");
			});
		</script>
	</body>
</html>